﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>入职面试基础测试</title>

    <link href="../lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <!-- 在url后面加参数可以立即刷新客户端缓存 -->
    <link href="../css/site.css" rel="stylesheet" />
</head>
<body>
    <div id="app" v-cloak style="padding-bottom:60px;">
        <div class="container-fluid">
            <div class="row center-block" style="width:1200px;min-height:50px;line-height:50px;">

                <!--导航区-->
                <div v-show="hasToken" class="col-lg-10">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#company_list" role="tab" data-toggle="tab">公司列表</a></li>
                        <li role="presentation"><a href="#invit_code" role="tab" @click="get_invitation_code_list" data-toggle="tab">查看面试邀请码</a></li>
                    </ul>
                </div>

                <div v-show="hasToken" class="col-lg-2 text-right">
                    <a href="" @click="signUp" class="btn btn-info">注销</a>
                </div>
            </div>
        </div>

        <div class="center-block" style="width:1200px;min-height:600px;">

            <!--登录后显示的主题内容-->
            <div v-if="bodyContent=='init'" class="center-block container-fluid tab-content">

                <div role="tabpanel" class="tab-pane active" id="company_list">
                    <div v-show="!show_exam_list.show">

                        <div style="padding-bottom:20px;padding-top:10px;">
                            <form role="form" class="form-inline">
                                <select class="form-control" v-model="search_company_data.company_condition">
                                    <option value="com_name">公司名称</option>
                                    <option value="com_code">公司代码</option>
                                    <option value="com_addr">公司地址</option>
                                </select>
                                <input type="text" v-model="search_company_data.company_keywords" class="form-control" placeholder="请输入关键字查找" />
                                <input type="button" @click="search_company" class="btn btn-default btn-toolbar btn-info" value="查找" />
                            </form>
                        </div>

                        <table class="table table-bordered table-striped">
                            <tr>
                                <td>公司名称</td>
                                <td title="统一社会信用代码">公司代码</td>
                                <td>公司地址</td>
                                <td>联系方式</td>
                                <td>查看测试题</td>
                            </tr>
                            <tr v-for="(item,index) in show_company_list.list">
                                <td>{{item.company_name}}</td>
                                <td>{{item.company_code}}</td>
                                <td>{{item.company_address}}</td>
                                <td>{{item.company_contact}}</td>
                                <td class="text-center">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <select class="form-control" v-model="item.job_id">
                                                <option v-for="(job,i) in item.jobs" :value="job.uuid">{{job.job_name}}</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <button @click="show_exam_by_job_id(index)" class="btn btn-primary" type="button">查看</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div v-html="show_company_list.pages" @click="get_com_pages_proxy($event)"></div>
                    </div>

                    <div v-show="show_exam_list.show">
                        <div class="row">
                            <div class="col-lg-4 col-lg-offset-4 text-center h3">{{show_exam_list.job_name}}测试题</div>
                            <div class="col-lg-4 text-right">
                                <button @click="change_company_state" type="button" class="btn btn-info">返回</button>
                            </div>
                        </div>
                        <div>
                            <template v-for="(item,index) in show_exam_list.list">
                                <div class="lead">{{index+1}}.&emsp;{{item.exam_content}}</div>
                                <div v-if="item.exam_type=='cq'" class="row lead">
                                    <div class="col-lg-3"><label><input type="radio" value="A" v-model="item.exam_eq_answer" />A</label></div>
                                    <div class="col-lg-3"><label><input type="radio" value="B" v-model="item.exam_eq_answer" />B</label></div>
                                    <div class="col-lg-3"><label><input type="radio" value="C" v-model="item.exam_eq_answer" />C</label></div>
                                    <div class="col-lg-3"><label><input type="radio" value="D" v-model="item.exam_eq_answer" />D</label></div>
                                </div>
                                <div v-if="item.exam_type=='eq'">
                                    <textarea style="width:60%;" rows="5" v-model="item.exam_eq_answer"></textarea>
                                </div>
                            </template>

                            <div class="text-center">
                                <button @click="submit_exam_data" class="btn btn-primary" type="button">提交</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane container-fluid" id="invit_code">
                    <div class="row">
                        <table class="table table-bordered table-striped">
                            <tr>
                                <td>公司名称</td>
                                <td>公司地址</td>
                                <td>公司联系方式</td>
                                <td>岗位名称</td>
                                <td>邀请码</td>
                            </tr>
                            <tr v-for="(item,index) in invitation_code_list">
                                <td>{{item.company_name}}</td>
                                <td>{{item.company_address}}</td>
                                <td>{{item.company_contact}}</td>
                                <td>{{item.job_name}}</td>
                                <td>{{item.invitation_code}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div v-if="bodyContent=='login'" class="center-block" style="width:600px;">
                <!-- 登录表单,如果以登录则不会显示 -->
                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label class="col-md-3 control-label">用户名:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" autocomplete="on" id="uname" v-model="uname" placeholder="昵称,手机号,邮箱" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">密码:</label>
                        <div class="col-md-9">
                            <input @keyup.enter="getJwtToken" type="password" class="form-control" id="pwd" v-model="pwd" placeholder="" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-2 col-md-offset-3">
                            <button type="button" v-on:click="getJwtToken" class="btn btn-primary">登录</button>
                        </div>
                        <div class="col-md-2">
                            <button type="button" @click="signIn" class="btn btn-block">注册</button>
                        </div>
                    </div>
                </form>
            </div>

            <!--注册的表单-->
            <div v-if="bodyContent=='SignInUser'" class="center-block" style="width:600px;">
                <form id="regUserForm" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-md-3 control-label">注册类型:</label>
                        <div class="col-md-9">
                            <select v-model="signUserData.auth_role" class="form-control">
                                <option value="user">个人</option>
                                <option value="company">公司</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">登录名:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" v-model="signUserData.nickname" placeholder="2到20个字符" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">密码:</label>
                        <div class="col-md-9">
                            <input type="password" class="form-control" v-model="signUserData.pwd" placeholder="6到20个字符" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">重复密码:</label>
                        <div class="col-md-9">
                            <input type="password" class="form-control" v-model="signUserData.repwd" placeholder="6到20个字符" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">邮箱:</label>
                        <div class="col-md-9">
                            <input type="email" class="form-control" v-model="signUserData.email" placeholder="电子邮件地址,必填" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">手机号:</label>
                        <div class="col-md-9">
                            <input type="tel" v-model="signUserData.phone" class="form-control" placeholder="手机号,必填" />
                        </div>
                    </div>

                    <!--个人用户注册时显示的表单-->
                    <template v-if="signUserData.auth_role=='user'">
                        <div class="form-group">
                            <label class="control-label col-md-3">真实姓名:</label>
                            <div class="col-md-9">
                                <input type="text" v-model="signUserData.uname" class="form-control" placeholder="真实姓名,面试时必须本人" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">生日:</label>
                            <div class="col-md-9">
                                <input type="date" id="signUserData-birthday" v-model="signUserData.birthday" class="form-control laydate-date-input" placeholder="真实生日,面试必须本人" />
                            </div>
                        </div>
                    </template>

                    <!--公司用户注册时显示的表单-->
                    <template v-if="signUserData.auth_role=='company'">
                        <div class="form-group">
                            <label class="control-label col-md-3">公司代码:</label>
                            <div class="col-md-9">
                                <input type="text" v-model="signUserData.company_code" class="form-control" placeholder="公司唯一的编号" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">公司地址:</label>
                            <div class="col-md-9">
                                <input type="text" v-model="signUserData.company_address" class="form-control" placeholder="公司办公的地址" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">公司名称:</label>
                            <div class="col-md-9">
                                <input type="text" v-model="signUserData.company_name" class="form-control" placeholder="公司名称" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">联系方式:</label>
                            <div class="col-md-9">
                                <input type="text" v-model="signUserData.company_contact" class="form-control" placeholder="公司电话号码或者邮箱" />
                            </div>
                        </div>
                    </template>

                    <div class="form-group">
                        <div class="col-md-3 col-md-offset-3">
                            <input type="button" @click.stop="registerUser" class="btn btn-primary" value="注册" />
                        </div>
                        <div class="col-md-3">
                            <input type="button" @click="userLogin" class="btn btn-default" value="登录" />
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <div class="container body-content navbar-fixed-bottom">
        <hr />
        <footer style="width:1200px;" class="center-block text-center navbar-fixed-bottom">
            <p>&copy; 2018 - 江郎才尽- s694060865@gmail.com</p>
        </footer>
    </div>

    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script src="../lib/laydate/laydate.js"></script>
    <!-- 想要立即刷新客户端缓存可以再url后面加参数 ?ver=xxx -->
    <script src="../js/site.js"></script>
    <script type="text/javascript">

        // 当前html页面的Vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                signUserData:
                {
                    nickname: '',
                    pwd: '',
                    uname: '',
                    company_address: '',
                    company_code: '',
                    company_contact: '',
                    company_name: '',
                    birthday: '',
                    email: '',
                    nickname: '',
                    phone: '',
                    auth_role: 'user',
                    repwd: ''
                },
                hasToken: false,
                bodyContent: 'init',
                uname: '',  // 登录表单的用户名
                pwd: '', //登录表单的密码
                show_company_list: {
                    list: {},   // 公司名称列表
                    pages: ''
                },
                show_exam_list: {
                    list: {},   // 试题数据列表
                    show: false,
                    job_name: '',    // 用户查看的测试题的 岗位名称, 下拉框的值
                    job_id: ''  // 岗位id
                },
                search_company_data: {
                    company_condition: 'com_name',
                    company_keywords: ''    // 搜索公司的条件类型和关键字
                },
                invitation_code_list: {}    // 邀请码列表
            },


            // 初始化的函数, 相当于ready
            mounted: function () {
                if (getCookie("token").length > 0) {
                    // 有token, 但是可能过期, 隐藏登陆和注册按钮
                    this.$data.hasToken = true;
                    this.testToken();   // 验证token是否有效

                    this.$http({
                        method: 'post',
                        url: '/api/Recruit/get_company_list',
                        timeout: 3000,
                    }).then(function (response) {
                        this.show_company_list.list = response.body.list;
                        this.show_company_list.pages = response.body.pages;
                        for (var i = 0; i < this.show_company_list.list.length; i++) {
                            if (this.show_company_list.list[i].jobs.length > 0) {
                                this.show_company_list.list[i].job_id = this.show_company_list.list[i].jobs[0].uuid;
                            }
                        }
                    });
                } else {
                    // 没有token, 显示登录的模板
                    this.$data.bodyContent = "login";
                }
            },

            // vue监听的方法
            methods: {
                // 登录api, 获取token
                getJwtToken: function () {
                    if ($.trim(this.uname).length == 0 || $.trim(this.pwd).length == 0) {
                        alert("请输入用户名或者密码");
                        return;
                    }
                    this.$http({
                        method: 'post',
                        url: '/api/account/login',
                        body: { uname: this.uname, pwd: this.pwd },
                        timeout: 3000
                    }).then(function (response) {
                        if (response.status == 200) {
                            this.hasToken = true;
                            setCookie("token", response.body.token, response.body.expires_in);
                            setCookie("token_type", response.body.token_type, response.body.expires_in);
                            this.$data.bodyContent = 'init';
                            if (response.body.auth_role == 'company') {
                                this.signUserData.auth_role = 'company';
                                location.href = '/app/admin.html';
                            } else if (response.body.auth_role == 'user') {
                                this.$http({
                                    method: 'post',
                                    url: '/api/Recruit/get_company_list',
                                    timeout: 3000
                                }).then(function (response) {
                                    this.show_company_list.list = response.body.list;
                                    this.show_company_list.pages = response.body.pages;
                                    for (var i = 0; i < this.show_company_list.list.length; i++) {
                                        if (this.show_company_list.list[i].jobs.length > 0) {
                                            this.show_company_list.list[i].job_id = this.show_company_list.list[i].jobs[0].uuid;
                                        }
                                    }
                                });
                            }
                        } else {
                            alert(response);
                        }
                    });
                },
                // 验证token是否有效的方法
                testToken: function () {
                    this.$http({
                        method: 'post',
                        url: '/api/account/CheckToken',
                        timeout: 3000,
                    }).then(function (response) {
                        if (response.body == 'company') {
                            this.signUserData.auth_role = 'company';
                            location.href = '/app/admin.html';
                        }
                        console.info(response.body);
                    });
                },
                // 注销
                signUp: function () {
                    setCookie("token", '');
                    this.bodyContent = 'login';
                },
                // 打开注册界面
                signIn: function () {
                    this.bodyContent = 'SignInUser';
                },
                // 打开登录界面
                userLogin: function () {
                    this.bodyContent = 'login';
                },
                // 注册
                registerUser: function () {
                    if (this.signUserData.nickname.length < 2 || this.signUserData.nickname.length > 20) {
                        this.signUserData.nickname = '';
                        return;
                    }
                    this.signUserData.nickname = $.trim(this.signUserData.nickname);

                    this.signUserData.pwd = $.trim(this.signUserData.pwd);
                    if (this.signUserData.pwd.length < 6) {
                        this.signUserData.pwd = '';
                        return;
                    }
                    if (this.signUserData.pwd != this.signUserData.repwd) {
                        console.log("密码不正确");
                        this.signUserData.repwd = '';
                        return;
                    }

                    var email = this.signUserData.email;
                    if (!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
                        this.signUserData.email = '';
                        return;
                    }

                    if (this.signUserData.phone.length != 11) {
                        this.signUserData.phone = '';
                        return;
                    }
                    if (this.signUserData.auth_role == 'user') {
                        if (this.signUserData.uname.length < 2 || this.signUserData.uname.length > 20) {
                            this.signUserData.uname = '';
                            return;
                        }
                        this.signUserData.uname = $.trim(this.signUserData.uname);
                        if (this.signUserData.birthday.length == 0) {
                            return;
                        }
                    } else if (this.signUserData.auth_role == 'company') {
                        if (this.signUserData.company_code.length == 0) {
                            return;
                        }
                        if (this.signUserData.company_address.length == 0) {
                            return;
                        }
                        if (this.signUserData.company_name.length == 0) {
                            return;
                        }
                        if (this.signUserData.company_contact.length == 0) {
                            return;
                        }
                    }
                    // 开始提交到后台注册.
                    this.$http({
                        method: 'post',
                        url: '/api/account/RegisterUser',
                        body: { user: this.signUserData },
                        timeout: 3000,
                    }).then(function (response) {
                        if (response.status == 200) {
                            alert("注册成功");
                            this.$data.bodyContent = 'login';
                        } else {
                            alert(response);
                        }
                    });
                },
                // 根据岗位id加载数据
                show_exam_by_job_id: function (index) {
                    if (this.show_company_list.list[index].job_id.length == 0) {
                        alert('暂无数据');
                        return;
                    }
                    this.$http({
                        method: 'post',
                        url: '/api/Recruit/get_exam_by_job_id/' + this.show_company_list.list[index].job_id,
                        timeout: 3000
                    }).then(function (response) {
                        if (response.status == 200) {
                            for (var i = 0; i < this.show_company_list.list[index].jobs.length; i++) {
                                if (this.show_company_list.list[index].job_id == this.show_company_list.list[index].jobs[i].uuid) {
                                    this.show_exam_list.job_name = this.show_company_list.list[index].jobs[i].job_name;
                                    this.show_exam_list.job_id = this.show_company_list.list[index].jobs[i].uuid;
                                }
                            }
                            this.show_exam_list.list = response.body;
                            if (this.show_exam_list.list.length == 0) {
                                alert('暂无数据');
                                return;
                            }
                            this.show_exam_list.show = !this.show_exam_list.show;
                            console.log(response.body);
                        } else {
                            alert(response);
                        }
                    });
                },
                // 显示公司名称列表
                change_company_state: function () {
                    this.show_exam_list.show = !this.show_exam_list.show;
                },
                // 提交测试数据
                submit_exam_data: function () {
                    for (var i = 0; i < this.show_exam_list.list.length; i++) {
                        this.show_exam_list.list[i].exam_eq_answer = $.trim(this.show_exam_list.list[i].exam_eq_answer);
                        if (this.show_exam_list.list[i].exam_eq_answer.length == 0) {
                            alert("请输入第" + (i + 1) + "题的数据");
                            return;
                        }
                    }
                    // 提交到服务器
                    var answer_list = [];
                    for (var i = 0; i < this.show_exam_list.list.length; i++) {
                        var temp = { exam_id: this.show_exam_list.list[i].id, exam_type: this.show_exam_list.list[i].exam_type, exam_answer: this.show_exam_list.list[i].exam_eq_answer };
                        answer_list.push(temp);
                    }

                    this.$http({
                        method: 'post',
                        url: '/api/Recruit/submit_exam_data',
                        timeout: 3000,
                        body: {
                            job_id: this.show_exam_list.job_id,
                            list: answer_list
                        }
                    }).then(function (response) {
                        console.log(response.body);
                        alert(response.body);
                        this.show_exam_list.show = !this.show_exam_list.show;
                    });
                },
                // 根据条件搜索公司数据的方法
                search_company: function () {
                    if ($.trim(this.search_company_data.company_keywords).length > 0) {
                        this.$http({
                            method: 'post',
                            url: '/api/Recruit/search_company_list',
                            timeout: 3000,
                            body: {
                                com_type: this.search_company_data.company_condition,
                                keywords: $.trim(this.search_company_data.company_keywords)
                            }
                        }).then(function (response) {
                            this.show_company_list.list = response.body.list;
                            this.show_company_list.pages = response.body.pages;
                            for (var i = 0; i < this.show_company_list.list.length; i++) {
                                if (this.show_company_list.list[i].jobs.length > 0) {
                                    this.show_company_list.list[i].job_id = this.show_company_list.list[i].jobs[0].uuid;
                                }
                            }
                        });
                    }
                },
                // 获取公司数据的翻页按钮代理事件
                get_com_pages_proxy: function (event) {
                    if (event.target.nodeName.toLowerCase() == 'a') {
                        console.log($(event.target).attr("data-url"));
                        this.$http({
                            method: 'post',
                            url: $(event.target).attr("data-url"),
                            timeout: 3000,
                        }).then(function (response) {
                            this.show_company_list.list = response.body.list;
                            this.show_company_list.pages = response.body.pages;
                            for (var i = 0; i < this.show_company_list.list.length; i++) {
                                if (this.show_company_list.list[i].jobs.length > 0) {
                                    this.show_company_list.list[i].job_id = this.show_company_list.list[i].jobs[0].uuid;
                                }
                            }
                        });
                    }
                },
                // 获取所有邀请码列表, 暂不分页显示
                get_invitation_code_list: function () {
                    if (this.invitation_code_list.length > 0) {
                        return; // 已经加载过数据
                    }
                    this.$http({
                        method: 'post',
                        url: '/api/recruit/get_invitation_code_list',
                        timeout: 3000
                    }).then(function (response) {
                        this.invitation_code_list = response.body;
                    });
                }
            }
        });
    </script>
</body>
</html>
